<template>
    <PageLayout>
        <!-- 页面头部 -->
        <section class="py-12 bg-gradient-to-r from-primary/5 to-secondary/5">
            <div class="container mx-auto px-4 text-center">
                <SectionTitle 
                    title="沿途风景" 
                    subtitle="用镜头记录旅途中的美好，每一处风景都是大自然赠予我们的礼物" 
                />
            </div>
        </section>

        <!-- 筛选和搜索 -->
        <section class="py-6 bg-white/80 backdrop-blur-sm sticky top-0 z-30 border-b border-neutral-200">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row gap-4 items-center justify-between">
                    <!-- 地点筛选 -->
                    <div class="flex gap-2 flex-wrap">
                        <button v-for="location in locations" :key="location.value"
                            @click="selectedLocation = location.value" :class="[
                                'px-4 py-2 rounded-full text-sm transition-colors',
                                selectedLocation === location.value
                                    ? 'bg-primary text-white'
                                    : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
                            ]">
                            {{ location.label }}
                        </button>
                    </div>

                    <!-- 视图切换 -->
                    <div class="flex items-center gap-4">
                        <div class="flex bg-neutral-100 rounded-lg p-1">
                            <button @click="viewMode = 'grid'" :class="[
                                'px-3 py-1 rounded text-sm transition-colors',
                                viewMode === 'grid' ? 'bg-white shadow-sm' : 'text-neutral-600'
                            ]">
                                <i class="fa fa-th"></i> 网格
                            </button>
                            <button @click="viewMode = 'masonry'" :class="[
                                'px-3 py-1 rounded text-sm transition-colors',
                                viewMode === 'masonry' ? 'bg-white shadow-sm' : 'text-neutral-600'
                            ]">
                                <i class="fa fa-th-large"></i> 瀑布流
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 风景画廊 -->
        <section class="py-12">
            <div class="container mx-auto px-4">
                <!-- 网格视图 -->
                <div v-if="viewMode === 'grid'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div v-for="scenery in filteredSceneries" :key="scenery.id" class="group cursor-pointer"
                        @click="openSceneryDetail(scenery)">
                        <div class="relative overflow-hidden rounded-xl bg-neutral-100 aspect-[4/3]">
                            <img :src="scenery.image" :alt="scenery.title" class="w-full h-full object-cover img-zoom">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <div class="absolute bottom-4 left-4 right-4 text-white">
                                    <h3 class="font-bold mb-1">{{ scenery.title }}</h3>
                                    <p class="text-sm opacity-90">{{ scenery.location }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 瀑布流视图 -->
                <div v-else class="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
                    <div v-for="scenery in filteredSceneries" :key="scenery.id"
                        class="break-inside-avoid group cursor-pointer" @click="openSceneryDetail(scenery)">
                        <div class="relative overflow-hidden rounded-xl bg-neutral-100">
                            <img :src="scenery.image" :alt="scenery.title" class="w-full h-auto object-cover img-zoom">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <div class="absolute bottom-4 left-4 right-4 text-white">
                                    <h3 class="font-bold mb-1">{{ scenery.title }}</h3>
                                    <p class="text-sm opacity-90">{{ scenery.location }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 加载更多 -->
                <div class="text-center mt-12" v-if="hasMore">
                    <button @click="loadMore" :disabled="loading"
                        class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg transition-colors disabled:opacity-50">
                        {{ loading ? '加载中...' : '加载更多' }}
                    </button>
                </div>
            </div>
        </section>

        <!-- 风景详情弹窗 -->
        <div v-if="selectedScenery" class="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4"
            @click="closeSceneryDetail">
            <div class="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto" @click.stop>
                <div class="relative">
                    <img :src="selectedScenery.image" :alt="selectedScenery.title"
                        class="w-full h-64 md:h-96 object-cover rounded-t-2xl">
                    <button @click="closeSceneryDetail"
                        class="absolute top-4 right-4 w-10 h-10 bg-black/50 text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-colors">
                        <i class="fa fa-times"></i>
                    </button>

                    <!-- 导航按钮 -->
                    <button v-if="currentIndex > 0" @click="previousScenery"
                        class="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-black/50 text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-colors">
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <button v-if="currentIndex < filteredSceneries.length - 1" @click="nextScenery"
                        class="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-black/50 text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-colors">
                        <i class="fa fa-chevron-right"></i>
                    </button>
                </div>

                <div class="p-6">
                    <h3 class="text-2xl font-bold mb-2">{{ selectedScenery.title }}</h3>
                    <p class="text-neutral-600 mb-4">{{ selectedScenery.description }}</p>
                    <div class="flex items-center gap-6 text-sm text-neutral-500 mb-4">
                        <span><i class="fa fa-map-marker mr-2"></i>{{ selectedScenery.location }}</span>
                        <span><i class="fa fa-calendar mr-2"></i>{{ selectedScenery.date }}</span>
                        <span><i class="fa fa-camera mr-2"></i>{{ selectedScenery.camera }}</span>
                    </div>

                    <!-- 分享和下载 -->
                    <div class="flex gap-4">
                        <button @click="shareScenery"
                            class="flex items-center gap-2 px-4 py-2 bg-neutral-100 hover:bg-neutral-200 rounded-lg transition-colors">
                            <i class="fa fa-share"></i>
                            <span>分享</span>
                        </button>
                        <button @click="downloadScenery"
                            class="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors">
                            <i class="fa fa-download"></i>
                            <span>下载</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </PageLayout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import PageLayout from '@/components/layout/PageLayout.vue'
import SectionTitle from '@/components/ui/SectionTitle.vue'

// 响应式数据
const selectedLocation = ref('all')
const selectedScenery = ref(null)
const viewMode = ref('grid')
const loading = ref(false)
const pageSize = 12
const currentPage = ref(1)

// 地点选项
const locations = [
    { label: '全部', value: 'all' },
    { label: '山川', value: 'mountain' },
    { label: '海边', value: 'sea' },
    { label: '城市', value: 'city' },
    { label: '乡村', value: 'countryside' },
    { label: '森林', value: 'forest' }
]

// 风景数据
const allSceneries = ref([
    {
        id: 1,
        image: 'https://picsum.photos/id/1018/800/600',
        title: '晨雾中的山峰',
        description: '清晨的第一缕阳光穿透薄雾，山峰若隐若现，如诗如画。这是大自然最温柔的问候，也是一天中最宁静的时刻。',
        location: '黄山',
        date: '2023-10-15',
        camera: 'Canon EOS R5',
        category: 'mountain'
    },
    {
        id: 2,
        image: 'https://picsum.photos/id/1015/800/500',
        title: '海边的黄昏',
        description: '夕阳西下，海面波光粼粼，远处的渔船归港，一切都显得那么安详美好。',
        location: '青岛海边',
        date: '2023-09-28',
        camera: 'Sony A7R4',
        category: 'sea'
    },
    {
        id: 3,
        image: 'https://picsum.photos/id/1016/800/700',
        title: '城市夜景',
        description: '华灯初上的城市，霓虹闪烁，车水马龙，现代都市的繁华与美丽。',
        location: '上海外滩',
        date: '2023-09-20',
        camera: 'Nikon Z9',
        category: 'city'
    },
    {
        id: 4,
        image: 'https://picsum.photos/id/1019/800/600',
        title: '乡村田野',
        description: '金秋时节，稻田一片金黄，微风吹过，稻浪翻滚，丰收的喜悦溢于言表。',
        location: '江南水乡',
        date: '2023-10-01',
        camera: 'Fujifilm X-T5',
        category: 'countryside'
    },
    {
        id: 5,
        image: 'https://picsum.photos/id/1020/800/650',
        title: '森林深处',
        description: '阳光透过树叶的缝隙洒下斑驳的光影，森林深处静谧而神秘。',
        location: '长白山',
        date: '2023-08-15',
        camera: 'Canon EOS R6',
        category: 'forest'
    },
    {
        id: 6,
        image: 'https://picsum.photos/id/1021/800/550',
        title: '湖光山色',
        description: '清澈的湖水倒映着远山，天空中白云朵朵，构成了一幅完美的画卷。',
        location: '西湖',
        date: '2023-07-22',
        camera: 'Sony A7M4',
        category: 'mountain'
    }
])

// 计算属性
const filteredSceneries = computed(() => {
    let filtered = allSceneries.value

    // 地点筛选
    if (selectedLocation.value !== 'all') {
        filtered = filtered.filter(scenery => scenery.category === selectedLocation.value)
    }

    return filtered.slice(0, currentPage.value * pageSize)
})

const hasMore = computed(() => {
    const totalFiltered = allSceneries.value.filter(scenery => {
        if (selectedLocation.value !== 'all' && scenery.category !== selectedLocation.value) {
            return false
        }
        return true
    }).length

    return currentPage.value * pageSize < totalFiltered
})

const currentIndex = computed(() => {
    if (!selectedScenery.value) return -1
    return filteredSceneries.value.findIndex(s => s.id === selectedScenery.value.id)
})

// 方法
const loadMore = () => {
    loading.value = true
    setTimeout(() => {
        currentPage.value++
        loading.value = false
    }, 500)
}

const openSceneryDetail = (scenery) => {
    selectedScenery.value = scenery
    document.body.style.overflow = 'hidden'
}

const closeSceneryDetail = () => {
    selectedScenery.value = null
    document.body.style.overflow = 'auto'
}

const previousScenery = () => {
    const index = currentIndex.value
    if (index > 0) {
        selectedScenery.value = filteredSceneries.value[index - 1]
    }
}

const nextScenery = () => {
    const index = currentIndex.value
    if (index < filteredSceneries.value.length - 1) {
        selectedScenery.value = filteredSceneries.value[index + 1]
    }
}

const shareScenery = () => {
    if (navigator.share) {
        navigator.share({
            title: `${selectedScenery.value.title} - Life 拾光`,
            text: selectedScenery.value.description,
            url: window.location.href
        })
    }
}

const downloadScenery = () => {
    const link = document.createElement('a')
    link.href = selectedScenery.value.image
    link.download = `${selectedScenery.value.title}.jpg`
    link.click()
}

// 重置分页
const resetPagination = () => {
    currentPage.value = 1
}

// 监听器
import { watch } from 'vue'
watch(selectedLocation, resetPagination)

// 键盘导航
const handleKeydown = (e) => {
    if (!selectedScenery.value) return

    if (e.key === 'ArrowLeft') {
        previousScenery()
    } else if (e.key === 'ArrowRight') {
        nextScenery()
    } else if (e.key === 'Escape') {
        closeSceneryDetail()
    }
}

onMounted(() => {
    document.addEventListener('keydown', handleKeydown)
})

import { onUnmounted } from 'vue'
onUnmounted(() => {
    document.removeEventListener('keydown', handleKeydown)
})
</script>